Estoy tratando de llamar a this dentro de la función onClick que está dentro del objeto, pero no estoy definido en la consola. ¿Por qué está pasando esto?

Panel.tsx:

 import * as React from 'react'; import PanelInterface from './Panel.Interface'; import Config from "../../Config"; const Panel: React.FC<PanelInterface> = (props) => { const config = new Config({ panel : { onClick: function() { console.log(this); } } }).get(); return ( <div {...config.panel}/> ); }; export default Panel;

Config.ts:

 export default class Config { private readonly configuration: any; constructor(configuration: Object) { this.configuration = configuration; } public get(): any { return this.configuration; } }

Salida de la consola:

 undefined undefined

Editar: las funciones de flecha de uso no tienen efecto. También indefinido en la salida.

Editar: la pregunta se cerró como un duplicado, aunque no lo es. Logré resolver el problema cambiando en Panel.Config:

 export default new Config({ panel : { className : css.panel, onClick: () => { console.log(this); } } });

a:

 const config = new Config({ panel : { className : css.panel, onClick: () => { console.log(config); } } }); export default config;

Entonces, en onClick en lugar de this , puedo usar config .